<template>
    <div class="left">
        <div class="textToPicImage">
            <div class="imageText">文生图</div>
        </div>
        <div class="settingCommon mt-[10px]">
            <div class="settingCommonHeader">
                <div class="settingCommonTitle"><img class="w-[24px] h-[24px]" :src="IconPrompt" />
                    <div class="settingCommonTitleText">大模型(Checkpoint)</div>
                </div>
                <div class="settingCommonTip">决定画面大体风格</div>
            </div>
            <div>
                <el-select class="write" v-model="drawForm.checkpoint">
                    <el-option v-for="item in sdModelData" :key="item.title" :label="item.model_name"
                        :value="item.model_name" />
                </el-select>
            </div>
        </div>
        <div class="common mt-[10px]">
            <div class="promptHeader">
                <div class="title"><img class="w-[24px] h-[24px]" :src="IconPrompt" />
                    <div class="titleText">提示词(Prompt)</div>
                </div>
                <div class="promptTip">将按照提示词绘制画面</div>
            </div>
            <l-textarea v-model="drawForm.prompt" maxlength="1024" :rows="6" :clearable="true" :show-word-limit="false"
                :contentStyle="{
                    width: '450px',
                    height: '114px',
                    fontFamily: 'PingFang SC, PingFang SC',
                    fontWeight: '400',
                    fontSize: '12px',
                    background: '#121318',
                    color: '#616772',
                    lineHeight: '14px'
                }" :customStyle="{
                    borderColor: '#000',
                    color: '#fff',
                    paddingBottom: '4px',
                    background: '#121318'

                }">
                <template #length-suffix>
                    <div class="length-suffix justify-end">
                        <el-button type="default" :link="true" class="ml-[10px]" :icon="Switch" :loading="isTranslate"
                            @click="translatePrompt()">

                        </el-button>
                        <el-button type="default" :link="true" class="ml-[10px]" :icon="CopyDocument"
                            @click="copyContent(promptValue)">

                        </el-button>
                        <el-button type="default" :link="true" class="ml-[10px]" :icon="Delete"
                            @click="promptValue = ''">

                        </el-button>
                    </div>
                </template>
            </l-textarea>
        </div>
        <div class="common mt-[10px]">
            <div class="promptHeader">
                <div class="title"><img class="w-[24px] h-[24px]" :src="IconPrompt" />
                    <div class="titleText">反向提示词(Negative prompt)</div>
                </div>
                <div class="promptTip">不会画出描述的画面</div>
            </div>
            <l-textarea v-model="drawForm.negativePrompt" maxlength="1024" :rows="6" :clearable="true"
                :show-word-limit="false" :contentStyle="{
                    width: '450px',
                    height: '114px',
                    fontFamily: 'PingFang SC, PingFang SC',
                    fontWeight: '400',
                    fontSize: '12px',
                    background: '#121318',
                    color: '#616772',
                    lineHeight: '14px'
                }" :customStyle="{
                    borderColor: '#000',
                    color: '#fff',
                    paddingBottom: '4px',
                    background: '#121318'

                }">
                <template #length-suffix>
                    <div class="length-suffix justify-end">
                        <el-button type="default" :link="true" class="ml-[10px]" :icon="Switch" :loading="isTranslate"
                            @click="translatePrompt()">

                        </el-button>
                        <el-button type="default" :link="true" class="ml-[10px]" :icon="CopyDocument"
                            @click="copyContent(reversePromptValue)">

                        </el-button>
                        <el-button type="default" :link="true" class="ml-[10px]" :icon="Delete"
                            @click="reversePromptValue = ''">

                        </el-button>
                    </div>
                </template>
            </l-textarea>
        </div>
        <div class="settingCommon mt-[10px]">
            <div class="settingCommonHeader">
                <div class="settingCommonTitle"><img class="w-[24px] h-[24px]" :src="IconPrompt" />
                    <div class="settingCommonTitleText">风格(Lora)</div>
                </div>
                <div class="settingCommonTip">决定画面大体风格</div>
            </div>
            <div>
                <el-select class="write" v-model="drawForm.lora">
                    <el-option v-for="item in loraList" :key="item.alias" :label="name" :value="item.alias" />
                </el-select>
            </div>
        </div>
        <div class="settingCommon mt-[10px]">
            <div class="settingCommonHeader">
                <div class="settingCommonTitle"><img class="w-[24px] h-[24px]" :src="IconPrompt" />
                    <div class="settingCommonTitleText">滤镜(Vae)</div>
                </div>
                <div class="settingCommonTip">调整画面色彩感觉</div>
            </div>
            <div>
                <el-select class="write" v-model="drawForm.vae">
                    <el-option v-for="item in vaeList" :key="item.filename" :label="item.model_name"
                        :value="item.filename" />
                </el-select>
            </div>
        </div>
        <div class="dialogEnter mt-[10px] controNet">
            <div class="dialogEnterHeader">
                <div class="title">
                    <img class="w-[24px] h-[24px]" :src="IconControl" />
                    <div class="titleText">控制网(ControlNet)</div>
                </div>
                <div class="dialogEnterTip" style="width: 190px;">使用控制模型对细节进行精确控制</div>
            </div>
            <template v-if="drawForm.controlSetting">
                <div class="controlSettingSelected" @click="controlNetVisiable = true">
                    {{ control.title }}
                </div>
            </template>
            <template v-else>
                <el-button @click="addControl" dark class="enterButton " :icon="Plus" type="primary">添加控制</el-button>
            </template>
        </div>
        <div class="divideLine">
            <div class="lineTitle">绘图设置</div>
            <div class="line"></div>
            <div class="EyeIcon">
                <template v-if="plotSetting === true">
                    <ElIcon :size="24">
                        <View @click="plotSetting = false" style="margin-left: 3px; color: #616772;cursor: pointer;" />
                    </ElIcon>
                </template>
                <template v-if="plotSetting === false">
                    <ElIcon :size="24">
                        <Hide @click="plotSetting = true" style="margin-left: 3px; color: #616772;cursor: pointer;" />
                    </ElIcon>
                </template>
            </div>
        </div>
        <template v-if="plotSetting === true">
            <!--    图片尺寸    -->
            <div class="dialogEnter  pictureSize">
                <div class="dialogEnterHeader">
                    <div class="title">
                        <img class="w-[24px] h-[24px]" :src="IconPictureSize" />
                        <div class="titleText">图片尺寸</div>
                    </div>
                </div>
                <div>
                    <el-space wrap>
                        <div @click="select('pictureSizeOptions', item)" class="pictureSizeOption w-[95px] h-[60px]"
                            v-for="(item) in pictureSizeOptions" :key="item.id">
                            <div class="h-[40px] pictureSizeContent"
                                :style="{ width: 40 * item.width + 'px', background: item.selected ? '#F86E07' : '#363A46' }">
                                {{
                    item.cover }}</div>
                            <div class="pictureSizeTitle">{{ item.label }}</div>
                        </div>
                    </el-space>
                </div>
            </div>
            <div class="settingCommon mt-[10px]">
                <div class="settingCommonHeader">
                    <div class="settingCommonTitle"><img class="w-[24px] h-[24px]" :src="IconPrompt" />
                        <div class="settingCommonTitleText">采样器(Sampler)</div>
                    </div>
                    <div class="settingCommonTip">扩散去噪算法的采样模式</div>
                </div>
                <div>
                    <el-select class="write" v-model="drawForm.samplerName" :options="samplerData">
                        <el-option v-for="item in samplerData" :key="item.name" :label="item.name" :value="item.name" />
                    </el-select>
                </div>
            </div>
            <div class="settingCommon mt-[10px]">
                <div class="settingCommonHeader">
                    <div class="settingCommonTitle"><img class="w-[24px] h-[24px]" :src="IconPrompt" />
                        <div class="settingCommonTitleText">采样步数(Steps)</div>
                    </div>
                    <div class="settingCommonTip">生成图片的迭代步数</div>
                </div>
                <div>
                    <el-input-number class="write" v-model="drawForm.steps" controls-position="right" />
                </div>
            </div>
            <div class="settingCommon mt-[10px]">
                <div class="settingCommonHeader">
                    <div class="settingCommonTitle"><img class="w-[24px] h-[24px]" :src="IconPrompt" />
                        <div class="settingCommonTitleText">生成次数(Batch)</div>
                    </div>
                    <div class="settingCommonTip">生成图片的批次数量</div>
                </div>
                <div>
                    <el-input-number class="write" v-model="drawForm.batchSize" controls-position="right" />
                </div>
            </div>
            <div class="settingCommon mt-[10px]">
                <div class="settingCommonHeader">
                    <div class="settingCommonTitle"><img class="w-[24px] h-[24px]" :src="IconPrompt" />
                        <div class="settingCommonTitleText">提示语引导系数(CFG Scale)</div>
                    </div>
                    <div class="settingCommonTip">提示词影响绘图程度</div>
                </div>
                <div>
                    <el-input-number class="write" v-model="drawForm.cfgScale" controls-position="right" />
                </div>
            </div>
            <div class="settingCommon mt-[10px]">
                <div class="settingCommonHeader">
                    <div class="settingCommonTitle"><img class="w-[24px] h-[24px]" :src="IconPrompt" />
                        <div class="settingCommonTitleText">随机种子</div>
                    </div>
                    <div class="settingCommonTip">填入后将使用seed对应的图片噪音生成画作</div>
                </div>
                <div>
                    <el-input-number class="write" v-model="drawForm.seed" controls-position="right" />
                </div>
            </div>
            <div class="settingCommon mt-[10px]">
                <div class="settingCommonHeader">
                    <div class="settingCommonTitle"><img class="w-[24px] h-[24px]" :src="IconPrompt" />
                        <div class="settingCommonTitleText">高分辨率修复(ADetailer)</div>
                    </div>
                    <div class="settingCommonTip">可生成高清图片</div>
                </div>
                <div>
                    <el-select class="write" v-model="drawForm.enableHr">
                        <el-option v-for="item in adetailerOption" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>
            </div>
        </template>
        <div class="create">
            <div class="startCreateButton">
                <el-button type="primary" @click="onDrawing" class="startCreateText">马上创作<ElIcon :size="24">
                        <Right style="margin-left: 3px; color: #FFFFFF;" />
                    </ElIcon></el-button>
            </div>
        </div>
        <el-dialog modal-class="controlNetDialog" :show-close="false" v-model="controlNetVisiable" width="900">
            <template #header>
                <div class="controlNetDialogHeader">
                    <div class="controlNetDialogTitle">
                        <img class="w-[24px] h-[24px]" :src="IconControl" />
                        <div class="controlNetDialogMainTitle">添加控制网</div>
                        <div class="controlNetDialogSecondaryTitle">/ControlNet</div>
                    </div>
                    <ElIcon @click="controlNetVisiable = false" :size="24">
                        <Close style="cursor: pointer;color:#F86E07;" />
                    </ElIcon>
                </div>
            </template>
            <div class="controlNetDialogContent">
                <div class="controlNetDialogContentLeft">
                    <el-scrollbar height="605px">
                        <div @click="changeControl(item)"
                            :class="control.title === item.title ? 'controlNetDialogOption selectedControl' : 'controlNetDialogOption'"
                            v-for="item in controlList" :key="item.title">
                            <div class="chineseName">{{ item.title }}</div>
                            <!-- <div class="englishName">{{ item.stats }}</div> -->
                        </div>
                    </el-scrollbar>
                </div>
                <div class="controlNetDialogContentRight">
                    <div class="flex">
                        <div class="titleStyle">{{ control.title }}</div>
                        <div class="statsStyle">{{ control.stats }}</div>
                    </div>
                    <div class="descriptionStyle">{{ control.description }}</div>
                    <div class="isDirectUseButton">
                        <el-radio-group v-model="isDirectUseControl" size="large">
                            <el-radio-button label="预处理控制图" value="preprocess" />
                            <el-radio-button label="直接使用控制图" value="direct" />
                        </el-radio-group>
                    </div>
                    <div class="pictureTipDialogUpload controlUpload">
                        <upload class="w-full mt-[0px]" :show-progress="true" :data="{
                    type: 'draw'
                }" :limitSize="10" @success="(val) => (controlSetting.image = val.data.path)">
                            <div class="flex flex-col items-center justify-center upload-view-box">
                                <template v-if="!controlSetting.image">
                                    <el-icon style="margin-top: 10px" :size="40"><upload-filled /></el-icon>
                                    <div style="margin-top:10px;width: 48px;height: 17px;font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 12px;color: #616772;line-height: 14px;text-align: left;font-style: normal;text-transform: none;"
                                        class="mt-[6px]">上传图片</div>
                                    <div
                                        style="margin-top:7px;margin-bottom:15px;width: 158px;height: 14px;font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 10px;color: #616772;line-height: 12px;text-align: left;font-style: normal;text-transform: none;">
                                        支持的文件类型jpg,png,webp</div>
                                </template>
                                <template v-else>
                                    <el-image class="w-full h-[90px]" :src="controlSetting.image" fit="contain" />
                                    <div class="upload-view-item">
                                        <el-icon size="24" class="upload-clear" color="#ffffff"
                                            @click.stop="controlSetting.image = ''">
                                            <CircleCloseFilled />
                                        </el-icon>
                                        <el-button type="primary">重新上传</el-button>
                                    </div>
                                </template>
                            </div>
                        </upload>
                    </div>
                    <template v-if="isDirectUseControl === '预处理控制图'">
                        <div class="settingCommon controlComponent">
                            <div class="settingCommonHeader">
                                <div class="settingCommonTitle">
                                    <div class="settingCommonTitleText ml-[10px]">预处理器</div>
                                </div>
                                <div class="settingCommonTip">Preprocessor</div>
                            </div>
                            <div>
                                <el-select v-model="controlSetting.preprocessor" class="write" size="large">
                                    <el-option v-for="item in control.moduleList" :key="item" :label="item"
                                        :value="item" />
                                </el-select>
                            </div>
                        </div>
                    </template>
                    <div class="settingCommon controlComponent">
                        <div class="settingCommonHeader">
                            <div class="settingCommonTitle">
                                <div class="settingCommonTitleText ml-[10px]">模型</div>
                            </div>
                            <div class="settingCommonTip">model</div>
                        </div>
                        <div>
                            <el-select v-model="controlSetting.model" class="write" size="large">
                                <el-option v-for="item in control.modelList" :key="item" :label="item" :value="item" />
                            </el-select>
                        </div>
                    </div>
                    <div style="position:absolute;bottom:0;right:0; margin-right: 20px; margin-bottom: 10px;">
                        <el-button type="default" @click="cancel">取消</el-button>
                        <el-button type="primary" @click="confim">确定</el-button>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
    <div class="right">
        <template v-if="isCreated">
            <div style="background: #262932;padding: 10px;">
                <img style="width: 100%;" :src="'data:image/png;base64,' + pictureBase" />
            </div>
            <div style="background: #262932;padding: 10px;">
                <div class="send">
                    <el-input v-model="sendValue" :input-style="{
                    width: '100%',
                    height: '76px',
                    borderRadius: '8px 8px 8px 8px',
                    fontFamily: 'PingFang SC, PingFang SC',
                    fontWeight: '400',
                    fontSize: '12px',
                    color: '#616772',
                    lineHeight: '19px'
                }">
                        <template #append>
                            <div class="append" @click="send"><img :src="iconSend" /></div>
                        </template>
                    </el-input>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="modelIcon">
                <img class="w-[291.36px] h-[275.43px]" :src="AdvancedModel" />
                <div class="title">先进模型&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 智能体验</div>
            </div>
        </template>
    </div>
</template>
<script setup lang="ts">
import { keywordPromptTranslate } from '~/api/drawing';
import IconPrompt from '@/assets/images/drawing/icon_prompt.png'
import IconPictureSize from '@/assets/images/icon_picture_size.png'
import IconControl from '@/assets/images/icon_control.png'
import { View, Hide, Right, Close, Switch, CopyDocument, Delete, Plus, UploadFilled } from '@element-plus/icons-vue'
import { ElIcon } from 'element-plus'
import iconSend from '@/assets/images/icon_send.png'
import AdvancedModel from '@/assets/images/advancedModel.png'
import Upload from '~/components/upload/index.vue'
import type { DrawingFormType } from '~/api/drawing'
import { useConfigEffect, yjData, sdData } from '~/pages/drawing/hooks/useConfigEffect'
import { sdDrawing } from '~/api/sd_drawing';
import { useUserStore } from '~/stores/user';
const sendValue = ref('')
const isCreated = ref(false)
const isDirectUseControl = ref('预处理控制图')
const picTipValue = ref('')
//提示词
const promptValue = ref('')
const reversePromptValue = ref('')
const adetailerOption = [{ label: '是', value: true }, { label: '否', value: false }]
// 请求翻译
const { isLock: isTranslate, lockFn: translatePrompt } = useLockFn(async () => {
    try {
        if (promptValue.value.trim() == '') {
            feedback.msgError('请输入描述词')
            return
        }
        const { promptEn } = await keywordPromptTranslate({
            prompt: promptValue.value
        })
        promptValue.value = promptEn
    } catch (error) {
        console.log('翻译失败=>', error)
    }
})
//复制文本
const { copy } = useCopy()
const copyContent = async (content: string) => {
    await copy(content)
}
const controlSetting = reactive({
    image: '',
    preprocessor: null,
    model: null,
})
const pictureSizeOptions = ref([{
    id: 1,
    label: '头像',
    cover: '1:1',
    value: '头像',
    selected: true,
    width: 1
}, {
    id: 2,
    label: '相机照片',
    cover: '3:2',
    value: '相机照片',
    width: 1.5,
    selected: false,
}, {
    id: 3,
    label: '文章配图',
    cover: '4:3',
    value: '文章配图',
    width: 1.3,
    selected: false,
}, {
    id: 4,
    label: '电脑桌面',
    cover: '16:9',
    value: '电脑桌面',
    width: 1.7,
    selected: false,
}, {
    id: 5,
    label: '自定义',
    cover: 'any',
    value: 'any',
    width: 1,
    selected: false,
}, {
    id: 6,
    label: '手机壁纸',
    cover: '1:1',
    value: '手机壁纸',
    width: 1,
    selected: false,
}, {
    id: 7,
    label: '社交媒体',
    cover: '1:1',
    value: '社交媒体',
    width: 1,
    selected: false,
}, {
    id: 8,
    label: '头像',
    cover: '1:1',
    value: '头像',
    width: 1,
    selected: false,
}])

const controlNetVisiable = ref(false)
const plotSetting = ref(false)

const userStore = useUserStore();
const { isLogin, toggleShowLogin } = userStore;
type DrawingHandlerType = (options: {
    drawing: DrawingFormType
    isClear: boolean
}) => void

const drawForm = inject<DrawingFormType>('drawForm')
const isReceiving = inject<boolean>('isReceiving')
const drawingHandler = inject<DrawingHandlerType>('drawingHandler')
const pictureBase = ref('')
const onDrawing = async () => {
    if (!isLogin) {
        toggleShowLogin();
        return
    }
    //drawForm.action = 'generate'
    //drawingHandler({ drawing: drawForm, isClear: true })
    if (!drawForm?.prompt) {
        feedback.msgError('请先输入提示词')
    }
    const data = await sdDrawing(drawForm)
    sendValue.value = JSON.stringify(drawForm)
    console.log('图片base64编码', data[0])
    isCreated.value = true
    pictureBase.value = data[0]
}
const select = (optionsName: string, option: any) => {
    if (optionsName === "model") {
        if (!option.selected) {
            drawForm.model = option
            loraList.value.forEach((item: any) => {
                if (item.id === option.id) {
                    item.selected = true
                } else {
                    item.selected = false
                }
            })
        }
    } else if (optionsName === 'lora') {
        if (!option.selected) {
            drawForm.engine = option
            loraList.value.forEach((item: any) => {
                if (item.id === option.id) {
                    item.selected = true
                } else {
                    item.selected = false
                }
            })
        }
    } else if (optionsName === "pictureSizeOptions") {
        if (!option.selected) {
            drawForm.scale = option.cover
            pictureSizeOptions.value.forEach((item: any) => {
                if (item.id === option.id) {
                    item.selected = true
                } else {
                    item.selected = false
                }
            })
        }
    }
}
const send = async () => {
    if (!sendValue.value) {
        feedback.msgError('请先输入数据')
    }
    const data = await sdDrawing(JSON.parse(sendValue.value))
    pictureBase.value = data[0]
}

const samplerData = ref([] as any)
const sdModelData = ref([] as any)
const vaeList = ref([] as any)
const loraList = ref([] as any)
const controlList = ref([] as any)
const control = ref({} as any)
const getSdModelList = async () => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "http://120.232.132.20:12732/sdapi/v1/sd-models");
    xhr.setRequestHeader("Content-type", "application/json");
    xhr.onload = function () {
        if (this.status === 200) {
            sdModelData.value = JSON.parse(this.response);
        }
    };
    xhr.send();
};
const getSamplersList = async () => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "http://120.232.132.20:12732/sdapi/v1/samplers");
    xhr.setRequestHeader("Content-type", "application/json");
    xhr.onload = function () {
        if (this.status === 200) {
            samplerData.value = JSON.parse(this.response);
        }
    };
    xhr.send();
};
const getVaeList = async () => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "http://120.232.132.20:12732/sdapi/v1/sd-vae");
    xhr.setRequestHeader("Content-type", "application/json");
    xhr.onload = function () {
        if (this.status === 200) {
            vaeList.value = JSON.parse(this.response);
        }
    };
    xhr.send();
};
const getLoraList = async () => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "http://120.232.132.20:12732/sdapi/v1/loras");
    xhr.setRequestHeader("Content-type", "application/json");
    xhr.onload = function () {
        if (this.status === 200) {
            loraList.value = JSON.parse(this.response);
        }
    };
    xhr.send();
};
const getControlDetailList = async () => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "http://120.232.132.20:12732/controlnet/control_types");
    xhr.setRequestHeader("Content-type", "application/json");
    xhr.onload = function () {
        if (this.status === 200) {
            const data = JSON.parse(this.response).control_types
            controlList.value.length = 0
            for (const i in data) {
                controlList.value.push({
                    title: i,
                    moduleList: data[i].module_list,
                    defaultOption: data[i].default_option,
                    modelList: data[i].model_list,
                    defaultModel: data[i].default_model,
                })
            }
            control.value = controlList.value[0]
        }
    };
    xhr.send();
};
getVaeList()
getSdModelList()
getSamplersList()
getLoraList()
getControlDetailList()

const addControl = () => {
    if (!isLogin) {
        toggleShowLogin();
        return
    }
    controlNetVisiable.value = true
}
const changeControl = (item: any) => {
    control.value = item
    controlSetting.preprocessor = null
    controlSetting.model = null
}
const confim = () => {
    if (!controlSetting.image) {
        feedback.msgError('请上传图片')
        return
    }
    if (!controlSetting.preprocessor && isDirectUseControl.value === '预处理控制图') {
        feedback.msgError('请选择预处理器')
        return
    }
    if (!controlSetting.model) {
        feedback.msgError('请选择模型')
        return
    }
    drawForm.controlSetting = controlSetting
    controlNetVisiable.value = false
}
const cancel = () => {
    controlNetVisiable.value = false
}
</script>
<style lang="scss" scoped>
.left {
    min-width: 501px;
    // height: 1827px;
    border-radius: 0px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    //justify-content: space-between;

    .promptHeader {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 9px;
        font-size: 14px;

        .promptTip {
            margin-left: 5px;
            width: 100px;
            height: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 10px;

            color: #616772;
            line-height: 12px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }

    .title {
        display: flex;
        align-items: center;

        .titleText {
            // width: 118px;
            height: 20px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 16px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }


    }

    .promatButtons {
        width: 300px;
        height: 25px;
        border-radius: 4px 4px 4px 4px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;

        .promatButtonsText {
            cursor: pointer;
            margin-left: 10px;
            padding: 4px 7px;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #8B8E92;
            // width: 75px;
            // height: 17px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 10px;
            color: #8B8E92;
            line-height: 12px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }

    .referencePictureHeader {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #fff;
        margin-bottom: 10px;

        .extra {
            margin-left: -50px;
            width: 140px;
            height: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 10px;
            color: #616772;
            line-height: 12px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .randomExtra {
            width: 200px;
        }

        .stylizedLevelsExtra {
            width: 200px;
            margin-left: 8px;
        }

    }

    .divideLine {
        display: flex;
        width: 460px;
        height: 33px;
        border-radius: 0px 0px 0px 0px;
        align-items: center;
        justify-content: space-between;

        .lineTitle {
            width: 48px;
            height: 17px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #616772;
            line-height: 14px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .line {
            width: 370px;
            height: 1px;
            background-color: #616772;
        }
    }

    :deep(.el-dialog) {
        background: #262932;
    }
}

//提示
.length-suffix {
    position: absolute;
    bottom: 0;
    left: 0px;
    font-size: 14px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 30px;
    background: '#121318';

}


.common {
    width: 460px;
    //height: 180px;
    background: #262932;
    border-radius: 8px 8px 8px 8px;
    padding: 10px;
    //margin-bottom: 20px;
}

.dialogEnter {
    width: 460px;
    height: 130px;
    background: #262932;
    border-radius: 8px 8px 8px 8px;
    padding: 5px 5px;

    .dialogEnterHeader {
        display: flex;
        align-items: center;

        .title {
            display: flex;
            align-items: center;

            .titleText {
                // width: 118px;
                height: 20px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #FFFFFF;
                line-height: 16px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }


        }

        .dialogEnterTip {
            margin-left: 5px;
            width: 80px;
            height: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 10px;
            color: #616772;
            line-height: 12px;
            text-align: left;
            font-style: normal;
            text-transform: none;

        }
    }

    .controlSettingSelected {
        margin: 0 auto;
        width: 95%;
        text-align: center;
        margin-top: 10px;
        height: 40px;
        font-size: 20px;
        line-height: 40px;
        background: #8B8E92;
        border-radius: 8px;
        cursor: pointer;
    }

    .mouseEnter {
        cursor: pointer;
        width: 428px;
        height: 74px;
        background: #363A46;
        border-radius: 8px 8px 8px 8px;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .description {
            padding-left: 10px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: 40px;

            .intro {
                width: 56px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #8B8E92;
                line-height: 16px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }

            .descriptionContent {

                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #8B8E92;
                line-height: 14px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }
    }

    .enterButton {
        margin: 10px 10px auto;
        width: 428px;
        height: 41px;
        background: #363A46;
        border-radius: 8px 8px 8px 8px;
        border: none;
    }
}

.controNet {
    height: 97px;
}

.pictureSize {
    height: 202px;

    .pictureSizeOption {
        cursor: pointer;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .pictureSizeContent {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 12px;
            color: #ffffff;
            line-height: 14px;
            text-align: center;
            font-style: normal;
            text-transform: none;
            //background: #363A46;
        }

        .pictureSizeTitle {
            margin-top: 10px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #ffffff;
            line-height: 14px;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }
    }

    .pictureSizeContent:hover {
        background: #F86E07 !important;
    }
}

.optionContainer {
    cursor: pointer;
    width: 198px;
    height: 160px;
    position: relative;
    border: 1px solid rgba(18, 19, 24, 0.8);

    .optionPictureIntro {
        width: 198px;
        height: 68px;
        background: rgba(18, 19, 24, 0.8);
        border-radius: 0px 0px 0px 0px;
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;

        .optionPictureIntroTitle {
            margin-left: 20px;
            margin-top: 10px;
            height: 20px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #8B8E92;
            line-height: 16px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .optionPictureIntroContent {
            margin-left: 20px;
            margin-top: 5px;
            height: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 10px;
            color: #616772;
            line-height: 12px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }
}

.optionContainer:hover {
    border: 1px solid #F86E07;
}

.selected {
    border: 1px solid #F86E07;
}

// }

.settingCommon {
    width: 460px;
    height: 90px;
    background: #262932;
    border-radius: 8px 8px 8px 8px;
    padding: 10px;

    .settingCommonHeader {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 9px;
        font-size: 14px;

        .settingCommonTip {
            margin-left: 10px;
            width: 120px;
            height: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 10px;

            color: #616772;
            line-height: 12px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }

    .settingCommonTitle {
        display: flex;
        align-items: center;

        .settingCommonTitleText {
            // width: 118px;
            height: 20px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 16px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }


    }

    .write {
        margin: 5px 5px auto;
        width: 428px;
        height: 34px;
        background: #121318;
        border-radius: 8px 8px 8px 8px;

        :deep(.el-input__wrapper) {
            background-color: #121318;
            border: none;
        }

        :deep(.el-input-number__decrease) {
            background-color: #121318;
            border: none;
        }

        :deep(.el-input-number__increase) {
            background-color: #121318;
            border: none;
        }
    }
}

.controlComponent {
    background: #121318;

    :deep(.el-input__wrapper) {
        background-color: #262932 !important;
        border: none;
    }
}

.create {
    margin-top: 10px;
    width: 460px;
    //height: 180px;
    border-radius: 8px 8px 8px 8px;
    //margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    .startCreateButton {

        cursor: pointer;
        width: 100%;
        // height: 41px;
        // background: #F86E07;
        border-radius: 8px 8px 8px 8px;
        display: flex;
        justify-content: center;
        align-items: center;

        .startCreateText {
            width: 100%;
            height: 41px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 19px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }
}

.stylizedMethod {
    margin-bottom: 0px;
}

.card {
    width: 206px;
    height: 48px;
    background: #363A46;
    box-shadow: 0px 0px 6px 0px rgba(248, 110, 7, 0.5);
    border-radius: 4px 4px 4px 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .cardTitle {

        //width: 48px;
        height: 17px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
        line-height: 14px;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }

    .cardIntro {
        //width: 55px;
        height: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 10px;
        color: #8B8E92;
        line-height: 12px;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }
}

.textToPicImage {
    width: 460px;
    height: 44px;
    background-image: url('~/assets/images/drawing/text_to_picture.png');
    background-size: cover;
    //background: linear-gradient(90deg, rgba(38, 41, 50, 0.23) 0%, #4F5568 49%, rgba(116, 125, 152, 0.23) 100%);
    border-radius: 8px 8px 8px 8px;
    padding: 10px 0px;
    border: 1px solid #23A691;

    .imageText {
        margin: 0 auto;

        width: 55px;
        height: 22px;
        font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
        font-weight: bold;
        font-size: 18px;
        color: #2DFFD9;
        line-height: 21px;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }
}

.controlNetDialog {
    width: 600px;
    height: 550px;
    background: #262932;
    border-radius: 6px 6px 6px 6px;

    .controlNetDialogContent {
        height: 639px;
        display: flex;
        justify-content: space-around;

        .controlNetDialogContentLeft {
            width: 235px;
            height: 639px;
            background: #121318;
            border-radius: 8px 8px 8px 8px;
            padding: 16px;

            .controlNetDialogOption {
                cursor: pointer;
                display: flex;
                padding-left: 10px;
                align-items: center;
                margin: auto;
                width: 200px;
                height: 33px;
                background: #262932;
                border-radius: 4px 4px 4px 4px;
                margin-top: 10px;

                .chineseName {
                    height: 17px;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #8B8E92;
                    line-height: 17px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }

                .englishName {
                    margin-left: 10px;
                    height: 12px;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 10px;
                    color: #616772;
                    line-height: 12px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }

            .selectedControl {
                background: #F86E07;

                .chineseName {
                    color: #ffffff;
                }

                .englishName {
                    color: #ffffff;
                }
            }
        }

        .controlNetDialogContentRight {
            position: relative;
            width: 591px;
            height: 639px;
            background: #121318;
            border-radius: 8px 8px 8px 8px;
            padding: 15px 15px;

            .titleStyle {
                font-size: 20px;
                font-weight: 600;
            }

            .statsStyle {
                margin-left: 10px;
                font-size: 14px;
                height: 30px;
                line-height: 30px;
            }

            .descriptionStyle {
                font-size: 18px;
                margin-top: 15px;
            }

            .isDirectUseButton {
                margin-top: 20px;
                display: flex;
                justify-content: center;
            }

            .controlUpload {
                background: #363A46;
            }
        }
    }
}

.largeScaleModelDialog {
    width: 900px;
    height: 516px;

}

.controlNetDialogHeader {
    background: #262932;
    display: flex;
    justify-content: space-between;

    .controlNetDialogTitle {
        display: flex;
        align-items: center;

        .controlNetDialogMainTitle {
            //width: 70px;
            height: 20px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 16px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .controlNetDialogSecondaryTitle {
            margin-left: 5px;
            //width: 44px;
            height: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 10px;
            color: #616772;
            line-height: 12px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }


    }
}

.pictureTipDialogUpload {
    margin-top: 10px;
    width: 550px;
    height: 240px;
    border-radius: 8px 8px 8px 8px;

    .upload-view-box {
        width: 100%;
        height: 240px;
    }
}

.pictureTipDescription {
    margin-top: 10px;
}

.right {
    flex: 1;
    padding: 10px;

}

.modelIcon {
    flex: 1;
    width: 100%;
    background: #262932;
    padding: 50px;

    img {
        margin: auto;
    }

    .title {
        margin-top: 50px;
        text-align: center;
        font-size: 20px;
        color: #F86E07;
    }

}
</style>